<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .con {
            width: 400px;
            height: 600px;
            background: mediumturquoise;
            margin: 30px auto;
            /* overflow: hidden; */
        }

        .con .box {
            width: 360px;
            height: 598px;
            border: 1px solid red;
            margin-left: 20px;
            text-align: center;
        }

        .con .box img {
            width: 340px;
            margin: 12px 0 0 10px;
            display: block;
        }

        .con .box p {
            line-height: 20px;
            font-size: 14px;
        }

        .num {
            margin-top: 20px;

        }

        .num .bd-con {
            margin-left: 80px;
        }

        .num .bd-con>span {
            float: left;
            margin-right: 10px;
        }

        .num .bd-con .num2 {
            width: 60px;
            height: 30px;
            border: 0;
            float: left;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            text-align: center;
        }

        .num .bd-con .btn,
        .num .bd-con .btn2 {
            width: 30px;
            height: 30px;
            float: left;
            text-align: center;
            border: 0;
            border: 1px solid #ccc;
            cursor: pointer;
        }

        .num .total {
            clear: both;
            padding-top: 10px;
        }
    </style>
</head>

<body>
    <div class="con">
        <div class="box">
            <img src="./images/2.jpg" alt="">
            <p>纪梵希 小羊皮口红304</p>
            <h3 >￥<span id="price">340</span></h3>
            <div class="num">
                <p class="bd-con">
                    <span>数量</span>
                    <input type="button" value="-" class="btn" id="bTn">
                    <input type="number" class="num2" min="0" id="number">
                    <input type="button" value="+" class="btn2" id="Btn">
                </p>
                <p class="total">总价￥：<span id="result" onclick="totalPrice()">0</span></p>
            </div>
        </div>
    </div>
    <script>

        /**
         * 保留
         */
        // let price = document.getElementById('price').innerText - 0;

        // let numberNode = document.getElementById('number');
        // let jian = document.getElementById('bTn');
        // let jia = document.getElementById('Btn');

        // let sum = function() {
        //     let number = numberNode.value - 0;
        //     let result = document.getElementById('result');

        //     result.innerText = price * number;
        // }

        // numberNode.oninput = sum;

        // jian.onclick = function() {
        //     numberNode.value = numberNode.value - 1;
        //     sum();
        // }

        // jia.onclick = function() {
        //     numberNode.value= numberNode.value - 0 + 1;
        //     sum();
        // }

        let price = document.getElementById('price').innerText - 0;

        let numberNode = document.getElementById('number');
        let jian = document.getElementById('bTn');
        let jia = document.getElementById('Btn');

        let sum = function(num) {
            let number = numberNode.value - 0 + num;
            let result = document.getElementById('result');

            numberNode.value = number;

            result.innerText = price * number;
        }

        numberNode.oninput = sum;

        jian.onclick = function() {sum(-1);}

        jia.onclick = function() {sum(1);}
    </script>
</body>

</html>